<script setup lang="ts">
import { ref } from 'vue'
import { useEditorStore } from '../stores/editor'
import { ElMessage } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'

const editorStore = useEditorStore()
const isDragging = ref(false)
const dragCounter = ref(0)

const emit = defineEmits<{
  upload: [file: File]
}>()

// 处理文件上传
function handleFiles(files: FileList) {
  Array.from(files).forEach(file => {
    if (file.type.startsWith('image/')) {
      const reader = new FileReader()
      reader.onload = (e) => {
        const img = new Image()
        img.onload = () => {
          // 计算合适的初始尺寸
          const maxSize = 200
          let width = img.width
          let height = img.height
          
          if (width > height) {
            if (width > maxSize) {
              height = (height * maxSize) / width
              width = maxSize
            }
          } else {
            if (height > maxSize) {
              width = (width * maxSize) / height
              height = maxSize
            }
          }
          
          // 计算居中位置
          const canvasWidth = editorStore.canvasSettings.width
          const canvasHeight = editorStore.canvasSettings.height
          const x = (canvasWidth - width) / 2
          const y = (canvasHeight - height) / 2
          
          editorStore.addImage({
            src: e.target?.result as string,
            x: Math.max(0, x),
            y: Math.max(0, y),
            width,
            height,
            rotation: 0,
            scaleX: 1,
            scaleY: 1
          })
        }
        img.src = e.target?.result as string
      }
      reader.readAsDataURL(file)
      emit('upload', file)
    } else {
      ElMessage.error('请上传图片文件')
    }
  })
}

// 拖拽事件处理
function handleDragEnter(e: DragEvent) {
  e.preventDefault()
  dragCounter.value++
  isDragging.value = true
}

function handleDragLeave(e: DragEvent) {
  e.preventDefault()
  dragCounter.value--
  if (dragCounter.value === 0) {
    isDragging.value = false
  }
}

function handleDragOver(e: DragEvent) {
  e.preventDefault()
}

function handleDrop(e: DragEvent) {
  e.preventDefault()
  isDragging.value = false
  dragCounter.value = 0
  
  const files = e.dataTransfer?.files
  if (files && files.length > 0) {
    handleFiles(files)
  }
}

// 点击上传
function handleClick() {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.multiple = true
  input.onchange = (e) => {
    const files = (e.target as HTMLInputElement).files
    if (files) {
      handleFiles(files)
    }
  }
  input.click()
}
</script>

<template>
  <div
    class="drag-upload-area"
    :class="{ 'dragging': isDragging }"
    @dragenter="handleDragEnter"
    @dragleave="handleDragLeave"
    @dragover="handleDragOver"
    @drop="handleDrop"
    @click="handleClick"
  >
    <div class="upload-content">
      <Upload class="upload-icon" />
      <p class="upload-text">
        <span v-if="isDragging" class="text-blue-500">释放文件到这里</span>
        <span v-else>点击或拖拽图片到这里上传</span>
      </p>
      <p class="upload-hint">支持 JPG、PNG、WebP 格式</p>
    </div>
    
    <!-- 拖拽遮罩 -->
    <div v-if="isDragging" class="drag-overlay">
      <div class="drag-overlay-content">
        <Upload class="text-6xl text-blue-500 mb-4" />
        <p class="text-xl text-blue-500 font-medium">释放文件到这里</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.drag-upload-area {
  position: relative;
  width: 100%;
  height: 120px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drag-upload-area:hover {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.drag-upload-area.dragging {
  border-color: #3b82f6;
  background-color: #eff6ff;
  transform: scale(1.02);
}

.upload-content {
  text-align: center;
  pointer-events: none;
}

.upload-icon {
  font-size: 2rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.upload-text {
  font-size: 0.875rem;
  color: #374151;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.upload-hint {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0;
}

.drag-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.drag-overlay-content {
  text-align: center;
  pointer-events: none;
}

/* 暗色主题适配 */
.dark .drag-upload-area {
  border-color: #4b5563;
  background-color: #374151;
}

.dark .drag-upload-area:hover,
.dark .drag-upload-area.dragging {
  border-color: #3b82f6;
  background-color: #1e3a8a;
}

.dark .upload-icon {
  color: #9ca3af;
}

.dark .upload-text {
  color: #f3f4f6;
}

.dark .upload-hint {
  color: #9ca3af;
}
</style>
